<div style="padding: 16px;">

    <!-- 内容主体区域  面包屑-->
    <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
            </span>

    <hr class="layui-bg-blue">

    <!--首页图像部分！-->

    <div class="layui-card" style="width: 300px;">
        <div class="layui-card-header" style="width: 270px;">当月项目结算</div>
        <div class="layui-card-body" style="width: 270px;height: 300px">
            <div id="box1" style="width: 300px; height: 270px"></div>
        </div>
    </div>


    <div class="layui-card" style="width: 300px;">
        <div class="layui-card-header" style="width: 270px;">厂库存储量</div>
        <div class="layui-card-body" style="width: 270px;height: 300px">
            <div id="box2" style="width: 500px; height: 400px"></div>
        </div>
    </div>

    <div class="container" style="position: absolute; top: 70px; left: 600px;">
        <div class="model">
            <div class="panel-body">
                <div id="map" style="width: 500px; height: 430px;">
                </div>
            </div>
        </div>

        <div class="layui-card" style="margin-left: 80px; margin-top: 50px ">
            <div class="layui-card-header" style="width: 270px">10年行情走势图</div>
            <div class="layui-card-body" style="width: 700px; height: 240px">
                <div id="box3" style="width: 700px ;height: 230px"></div>
            </div>
        </div>
    </div>
</div>

<script>
    <!--饼图-->
    var chart1 = echarts.init(document.querySelector('#box1'));
    var option1 = {
        legend: {
            data: ['已结算', '未结算', '等待项目', '签订合同中', '无'],
            textStyle: {
                fontSize: 10,  // 设置字体大小
                fontFamily: 'Arial, sans-serif'  // 设置字体样式
            },
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,  // 显示数据标签
                    position: 'center'
                },
                labelLine: {
                    show: true
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 1548, name: '已结算' },
                    { value: 310, name: '未结算' },
                    { value: 234, name: '等待' },
                    { value: 135, name: '签订合同' },
                    { value: 335, name: '维修' }
                ]
            }
        ]
    };
    // 步骤5：将配置项设置给echarts实例对象
    chart1.setOption(option1)
    <!---->
    var chart2 =echarts.init(document.querySelector('#box2'));
    var option2={
        xAxis: {
            type: 'category',
            data: ['1号厂库', '2号厂库', '3号厂库', '4号厂库', '5号厂库', '6号厂库', '7号厂库']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    chart2.setOption(option2);
</script>

<!--动态折线图-->

<script>
    var chart = echarts.init(document.querySelector('#box3'));

    // 初始化图表配置
    var option = {
        title: {
            text: '动态折线图示例'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    };

    // 设置初始数据
    var initialData = generateData();
    option.xAxis.data = initialData.map(function (item) {
        return item.year;
    });
    option.series[0].data = initialData.map(function (item) {
        return item.value;
    });

    // 使用setInterval定时更新数据
    var currentIndex = 0;
    setInterval(function () {
        currentIndex = (currentIndex + 1) % initialData.length;
        var newData = initialData[currentIndex];
        option.xAxis.data.shift();
        option.xAxis.data.push(newData.year);
        option.series[0].data.shift();
        option.series[0].data.push(newData.value);
        chart.setOption(option);
    }, 1000);

    // 生成数据的函数
    function generateData() {
        var data = [];
        var startYear = 2014;
        var endYear = 2024;
        for (var year = startYear; year <= endYear; year++) {
            data.push({
                year: year,
                value: Math.random() * 100
            });
        }
        return data;
    }

    // 使用刚指定的配置项和数据显示图表
    chart.setOption(option);

</script>
<!--地图热度-->
<script>
    var myChart = echarts.init(document.getElementById('map'));

    // 使用 ajax 加载 GeoJSON 数据
    var geoJsonUrl = 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json';

    function getGeoJson(cb) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', geoJsonUrl);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                cb(xhr.responseText);
            }
        };
        xhr.send();
    }

    getGeoJson(function (geoJson) {
        echarts.registerMap('china', JSON.parse(geoJson));

        var data = [

            { name: '北京省', value: 10 },
            { name: '天津省', value: 150 },
            { name: '上海省', value: 1500 },
            { name: '重庆省', value: 60 },
            { name: '河北省', value: 7000 },
            { name: '山西省', value: 350 },
            { name: '辽宁省', value: 2500 },
            { name: '吉林省', value: 90 },
            { name: '黑龙江省', value: 6000 },
            { name: '江苏省', value: 4000 },
            { name: '浙江省', value: 600 },
            { name: '安徽省', value: 650 },
            { name: '福建省', value: 0 },
            { name: '江西省', value: 750 },
            { name: '山东省', value: 1500},
            { name: '河南省', value: 50 },
            { name: '湖北省', value: 900 },
            { name: '湖南省', value: 950 },
            { name: '广东省', value: 5000 },
            { name: '广西省', value: 1050 },
            { name: '海南省', value: 100 },
            { name: '四川省', value: 15000 },
            { name: '贵州省', value: 1200 },
            { name: '云南省', value: 50 },
            { name: '陕西省', value: 1300 },
            { name: '甘肃省', value: 150 },
            { name: '青海省', value: 1400 },
            { name: '台湾省', value: 1450 },
            { name: '内蒙古省', value: 1500 },
            { name: '广西省', value: 1550 },
            { name: '西藏省', value: 1600 },
            { name: '宁夏省', value: 800 },
            { name: '新疆省', value: 10000 },
            { name: '香港省', value: 6000 },
            { name: '澳门省', value: 1800 }

// 其他城市的数据
        ];

        var max = Math.max.apply(null, data.map(function(item) { return item.value; }));

        var option = {
            tooltip: {
                formatter: '{b}: {c}'
            },
            visualMap: {
                type: 'piecewise',
                orient: 'vertical',
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                },
                min: 0,
                max: max,
                splitNumber: 5
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    aspectScale: 0.75, // 地图长宽比
                    zoom: 1.2, // 地图缩放级别
                    label: {
                        show: false
                    },
                    itemStyle: {
                        areaColor: '#fff',
                        borderColor: '#777'
                    },
                    emphasis: {
                        label: {
                            show: true
                        },
                        itemStyle: {
                            areaColor: '#fe9923'
                        }
                    },
                    data: data
                }
            ]
        };

        myChart.setOption(option);
    });
</script>
